<template>
  <el-row class="tac">
    <el-col>
      <el-menu :default-active="$route.path"
               class="el-menu-vertical-demo"
               @open="handleOpen"
               :router="true"
               @close="handleClose">
        <el-submenu v-for="item in menuList"
                    :index="item.path"
                    :key="item.name">
          <template slot="title">
            <span slot="title">{{item.title}}</span>
          </template>
          <el-menu-item v-for="Menu_son in item.children"
                        :index="Menu_son.path"
                        :key="Menu_son.name">{{Menu_son.title}}</el-menu-item>

        </el-submenu>

      </el-menu>
    </el-col>
  </el-row>
</template>

<script>
export default {
  props: {
  },
  data () {
    return {
      activeIndex: 'Business',
      menuList: [
        {
          name: 'OrderManage',//对应index
          title: '订单管理',
          path: '/OrderManage',
          children: [{
            name: 'OrderList',//对应index
            title: '住宿订单',
            path: '/OrderManage/OrderList'
          }]
        },

      ]

    }
  },
  methods: {
    clickMenu () {
      console.log("点击了");
    },
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    },
  }
}
</script>

<style lang="scss" scoped>
.tac {
  height: 100%;
  width: 150px;
  .el-menu {
    position: fixed;
    height: 100%;
    width: 150px;
  }
  .el-submenu .el-menu-item {
    min-width: 100px !important;
  }
}
</style>